<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>风向分布1</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
	</head>

	<body>
		<div id="app">
			<el-row> 
				<el-col :span="12">
					<div id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>

		</div>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {

					}
				},
				mounted: function() {
					var myChart = echarts.init(document.getElementById('myChart'));
					var option = {
						angleAxis: {
							type: 'category',
							data: ['0', '30', '60', '90', '120', '150', '180',
								'210', '240', '270', '300', '330'
							],
							//type: 'value',
						　　startAngle: 105,
						　　//splitNumber: 30, //坐标轴分割段数
						　　//clockwise: clockwise, //是否逆时针
						　　axisLine: { //坐标轴轴线设置
						　　　　lineStyle: {
						　　　　　　color: 'black'
						　　　　}
						　　},
						
						　　axisTick: { //坐标轴刻度设置
						　　　　show: true,
						　　},
						　　splitLine: { //分割线设置
						　　　　show: true,
								
						　　},
						　　axisLabel: { //刻度标签设置
						　　　　textStyle: {
						　　　　　　color: '#333'
						　　　　}
						　　}
						},
						radiusAxis: {//极坐标系的径向轴。
						　　min: 0,
						　　axisLine: { //坐标轴轴线设置
						　　　　show: false,
						　　　　 lineStyle: {
						　　　　 	color: "#ccc",
									
								}
						　　},
						　　axisTick: { //坐标轴刻度设置
						　　　　show: false
						　　},
						　　axisLabel: { //刻度标签设置
						　　　　margin: 0, //刻度与坐标轴之间的距离
						　　　　textStyle: {
						　　　　　　color: '#333'
						　　　　}
						　　}
						},
						tooltip: {
							formatter: function(params) {
								if (params.value.length > 1) {
									return params.seriesName + ' :<br/>' +
										params.value[0] +
										params.value[1];
								} else {
									return params.seriesName + ' :<br/>' +
										params.name + ' : ' +
										params.value;
								}
							},
							axisPointer: {
								show: true,
								type: 'cross',
								lineStyle: {
									type: 'dashed',
									width: 1
								}
							},
							
						},
						radiusAxis: {},
						polar: {},
						series: [{
							type: 'bar',
							data: [2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 10],
							coordinateSystem: 'polar',
							name: '1#',
							itemStyle:{
								normal:{
									color:'rgba(64,158,255,0.7)'
								}
								
							}
							//color:'#409EFF'
							//stack: 'a'
						}],
						legend: {
							//show: true,
							 data: ['1#']
						}
					}
					myChart.setOption(option)

				}

			})
		</script>
	</body>

</html>
